<template>
  <layer
    :layer="layer"
    @confirm="submit"
    ref="layerDom"
    @close="cancel"
    class="layer"
  >
    <el-form ref="ruleForm" :model="form" :rules="rulesObj" :label-width="90">
      <el-form-item label="上级菜单">
        <el-cascader
          ref="cascader"
          :options="selectData"
          :props="{ checkStrictly: true, expandTrigger: 'hover' }"
          @change="handleChange"
          v-model="form.parentId"
          placeholder="请选择上级菜单"
          style="width: 100%"
          :disabled="isDisable"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="form.menuType">
          <el-radio
            v-for="(value, key, index) in typeObj"
            :key="index"
            :label="key"
            >{{ value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName" style="width: 100%">
            <el-input
              placeholder="请输入菜单名称"
              v-model="form.menuName"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="orderNum" style="width: 100%">
            <el-input-number
              :min="0"
              :max="99"
              v-model="form.orderNum"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="路由地址" prop="path">
        <el-input
          placeholder="请输入路由地址"
          v-model="form.path"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="重定向地址" v-if="form.menuType === '0'">
        <el-input
          placeholder="请输入重定向地址"
          v-model="form.redirect"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        label="显示状态"
        prop="visible"
        v-if="form.menuType === '0'"
      >
        <el-radio-group v-model="form.visible">
          <el-radio
            v-for="(value, key, index) in visibleObj"
            :key="index"
            :label="key"
            >{{ value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单状态" prop="status" v-if="form.menuType === '0'">
        <el-radio-group v-model="form.status">
          <el-radio
            v-for="(value, key, index) in statusObj"
            :key="index"
            :label="key"
            >{{ value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图标" v-if="form.menuType === '0'">
        <el-input v-model="form.icon" placeholder="请输入图标标识符" clearable>
          <template #prefix>
            <i class="el-icon-eleme" v-show="!form.icon"></i>
            <i :class="form.icon" v-show="form.icon"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="组件路径"
        prop="component"
        v-if="form.menuType === '0'"
      >
        <el-input
          placeholder="请输入组件路径"
          v-model="form.component"
          clearable
        ></el-input>
      </el-form-item>
      <el-row v-if="form.menuType != '0'">
        <el-col :span="12">
          <el-form-item label="权限编码" prop="permCode">
            <el-input
              placeholder="请输入权限编码"
              v-model="form.permCode"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请求方式" prop="method">
            <el-select v-model="form.method">
              <el-option
                v-for="(value, key, index) in methodObj"
                :key="index"
                :label="value"
                :value="key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </layer>
</template>
<script>
import { defineComponent, ref, reactive } from "vue";
import layer from "_c/layer/index.vue";
import { ElMessage } from "element-plus";
import { queryDict } from "@/api/dictValue.js";
import { addMenu, editMenu } from "@/api/menu.js";
export default defineComponent({
  components: { layer },
  props: {
    //用于控制对话框
    layer: {
      required: true,
      type: Object,
      default: () => {
        return {
          show: false,
          title: "",
          showButton: true,
        };
      },
    },
    //多级选择框数据
    selectData: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
    },
    //菜单类型
    typeObj: {
      type: Object,
      required: true,
    },
    //可用状态
    statusObj: {
      type: Object,
      required: true,
    },
  },
  setup(props, ctx) {
    //禁用标志
    const isDisable = ref(false);
    //用于存储显示状态
    const visibleObj = ref({});

    //用于存储请求方式
    const methodObj = ref({});
    //级联选择器引用
    const cascader = ref(null);
    //表单数据
    const form = ref({
      menuName: "" || undefined,
      parentId: "" || undefined,
      orderNum: 0,
      path: "" || undefined,
      component: "" || undefined,
      menuType: "0" || undefined,
      visible: "0" || undefined,
      status: "0" || undefined,
      permCode: "" || undefined,
      icon: "",
      remark: "" || undefined,
      method: "" || undefined,
    });
    //表单校验规则
    const rulesObj = {
      menuName: [
        { required: true, message: "请输入菜单名称", trigger: "blur" },
      ],
      menuType: [
        { required: true, message: "请选择菜单类型", trigger: "blur" },
      ],
      orderNum: [{ required: true, message: "请输入排序", trigger: "blur" }],
      path: [{ required: true, message: "请输入路由地址", trigger: "blur" }],
      visible: [{ required: true, message: "请选择显示状态", trigger: "blur" }],
      status: [{ required: true, message: "请选择菜单状态", trigger: "blur" }],
      component: [
        { required: true, message: "请输入组件路径", trigger: "blur" },
      ],
      method: [{ required: true, message: "请选择请求方式", trigger: "blur" }],
      permCode: [
        { required: true, message: "请输入权限标识符", trigger: "blur" },
      ],
    };
    //级联选择回调方法
    const handleChange = (arr) => {
      //不能选自己（编辑时）
      if (props.layer.row && props.layer.row.id === arr[arr.length - 1]) {
        ElMessage.warning("不能选择上级菜单为自己！");
        return;
      }
      if (arr) {
        form.value.parentId = arr[arr.length - 1];
      } else {
        form.value.parentId = 0;
      }
      //选择后关闭级联选择框
      cascader.value.togglePopperVisible();
    };
    //表单引用
    const ruleForm = ref(null);
    //关闭对话框
    const cancel = () => {
      ruleForm.value.resetFields();
    };
    //挂载
    const init = () => {
      if (props.layer.row) {
        form.value = JSON.parse(JSON.stringify(props.layer.row));
        let count = 0;
        for (let o in form.value) {
          count++;
        }
        if (count === 1) {
          isDisable.value = true;
        }
      }
    };
    init();
    //更新方法
    const updateForm = async (obj) => {
      let data = {
        menuId: obj.id,
        menuName: obj.menuName,
        parentId: obj.parentId || undefined,
        orderNum: obj.orderNum,
        path: obj.path,
        redirect: obj.redirect || undefined,
        component: obj.component || undefined,
        menuType: obj.menuType,
        visible: obj.visible || undefined,
        status: obj.status || undefined,
        permCode: obj.permCode || undefined,
        icon: obj.icon || undefined,
        remark: obj.remark || undefined,
      };

      const { success } = await editMenu(data);
      if (success) {
        props.layer.show = false;
        cancel();
        ctx.emit("getTableData");
        ElMessage.success("操作成功！");
      }
    };
    //新增方法
    const addForm = async (obj) => {
      const { success } = await addMenu(obj);
      if (success) {
        props.layer.show = false;
        cancel();
        ctx.emit("getTableData");
        ElMessage.success("操作成功！");
      }
    };
    const submit = () => {
      if (ruleForm.value) {
        //规则校验
        ruleForm.value.validate((valid) => {
          if (valid) {
            let params = form.value;
            if (props.layer.row && props.layer.row.flag) {
              updateForm(params);
            } else {
              addForm(params);
            }
          } else {
            return false;
          }
        });
      }
    };
    //查询显示隐藏状态
    const getDictData = async () => {
      const { data, success } = await queryDict("menu_visible");
      if (success) {
        visibleObj.value = data;
      }
      const method = await queryDict("menu_method");
      if (method.success) {
        methodObj.value = method.data;
      }
    };
    getDictData();
    return {
      isDisable,
      methodObj,
      visibleObj,
      cascader,
      form,
      rulesObj,
      ruleForm,
      cancel,
      submit,
      handleChange,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-row {
  display: flex;
  justify-content: space-between;
}
</style>
